<%@ page contentType="text/html;charset=UTF-8" language="java" pageEncoding="utf-8" %>

<%
    String path=request.getContextPath();
%>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>user</title>
    <link rel="stylesheet" href="<%=path%>/css/element.css">
    <script src="<%=path%>/js/vue.js"></script>
    <script src="<%=path%>/js/element.js"></script>
    <script src="<%=path%>/js/jquery.js"></script>
</head>
<body>
<div id="app">
    <div>
        <!--查询条件-->
        <div>
                <span style="margin-top: 10px;">
                    <span class="spanSize">姓名：</span>
                    <el-input class="spanSize" style="width: 200px;" clearable v-model="queryData.name" placeholder="请输入姓名"></el-input>
                </span>
            <span style="margin-top: 10px;">
                    <span class="spanSize">用户名：</span>
                    <el-input class="spanSize" style="width: 200px;" clearable v-model="queryData.username" placeholder="请输入用户名"></el-input>
                </span>
            <span style="margin-top: 10px;">
                    <span class="spanSize">性别：</span>
                    <el-input class="spanSize" style="width: 200px;" clearable v-model="queryData.gender" placeholder="请输入性别"></el-input>
                </span>
            <span style="margin-top: 10px;">
                    <span class="spanSize">邮箱：</span>
                    <el-input class="spanSize" style="width: 200px;" clearable v-model="queryData.email" placeholder="请输入邮箱"></el-input>
                </span>
            <div style="margin-top: 10px;">
                   <span>
                        <el-button type="primary" @click="toQueryData()">查询</el-button>
                        <el-button type="primary" @click="clearQueryData()">清空</el-button>

                        <el-button type="success" @click="handleInsert()" style="margin-left: 20px;">新增</el-button>

                  </span>
            </div>
        </div>
        <!--展示表格-->
        <el-table
                :data="dataTable"
                border
                style="width: 100%;margin-top: 10px;">
            <el-table-column
                    prop="id"
                    label="用户id">
            </el-table-column>
            <el-table-column
                    prop="name"
                    label="姓名">
            </el-table-column>
            <el-table-column
                    prop="username"
                    label="用户名">
            </el-table-column>
            <el-table-column
                    prop="password"
                    label="密码">
            </el-table-column>
            <el-table-column
                    prop="gender"
                    label="性别">
            </el-table-column>
            <el-table-column
                    prop="email"
                    label="邮箱">
            </el-table-column>
            <el-table-column
                    prop="status"
                    label="用户状态"
                    :formatter="stateFormat">
            </el-table-column>
            <el-table-column
                    fixed="right"
                    label="操作"
                    width="100">
                <template slot-scope="scope">

                    <el-button type="text" size="small" @click="handleEdit(scope.row)">编辑</el-button>


                    <el-button type="text" size="small" @click="handleDelete(scope.row)">删除</el-button>

                </template>
            </el-table-column>
        </el-table>
        <div style="float: right;margin-top: 10px;">
            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="page"
                    :page-sizes="[10, 20, 30, 40]"
                    :page-size="pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total">
            </el-pagination>
        </div>
        <!--新增弹出框-->
        <el-dialog :title="title" :visible.sync="dialogFormVisible" :close-on-press-escape="false" :close-on-click-modal="false"  :before-close="closeDialog">
            <el-form :model="form" :rules="rules" ref="ruleUser">
                <el-form-item label='用户id' prop='id' :label-width="formLabelWidth" v-if="false">
                    <el-input placeholder='请输入用户id' clearable autocomplete="off" v-model='form.id' size="small"  />
                </el-form-item>
                <el-form-item label='姓名' prop='name' :label-width="formLabelWidth">
                    <el-input placeholder='请输入姓名' clearable autocomplete="off" v-model='form.name' size="small"  />
                </el-form-item>
                <el-form-item label='用户名' prop='username' :label-width="formLabelWidth">
                    <el-input placeholder='请输入用户名' clearable autocomplete="off" v-model='form.username' size="small"  />
                </el-form-item>
                <el-form-item label='密码' prop='password' :label-width="formLabelWidth">
                    <el-input placeholder='请输入密码' clearable autocomplete="off" v-model='form.password' size="small"  />
                </el-form-item>
                <el-form-item label='性别' prop='gender' :label-width="formLabelWidth">
                    <el-input placeholder='请输入性别' clearable autocomplete="off" v-model='form.gender' size="small"  />
                </el-form-item>
                <el-form-item label='邮箱' prop='email' :label-width="formLabelWidth">
                    <el-input placeholder='请输入邮箱' clearable autocomplete="off" v-model='form.email' size="small"  />
                </el-form-item>
                <el-form-item label='用户状态' prop='status' :label-width="formLabelWidth">
                    <el-select v-model="form.status" placeholder="请选择">
                        <el-option
                                v-for="item in statusOptions"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="closeDialog()">取 消</el-button>
                <el-button type="primary" @click="submitUser">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</div>
</body>
<script>
    let vue = new Vue({
        el: '#app',
        data() {
            const statusOptions=[
                {
                    value:1,
                    label:"删除"
                },
                {
                    value:0,
                    label:"使用"
                },
            ]
            return {
                statusOptions,
                dataTable:[],
                queryData:this.queryDataTemp(),
                page:1,
                pageSize:10,
                total:10,
                form:this.initForm(),
                title:"",
                type:"",
                dialogFormVisible:false,
                formLabelWidth:"100px",
                rules: {
                    id :[
                        {required: true, message: '请输入用户id', trigger: 'blur'},],
                    name :[
                        {required: true, message: '请输入姓名', trigger: 'blur'},],
                    username :[
                        {required: true, message: '请输入用户名', trigger: 'blur'},],
                    password :[
                        {required: true, message: '请输入密码', trigger: 'blur'},],
                    gender :[
                        {required: true, message: '请输入性别', trigger: 'blur'},],
                    email :[
                        {required: true, message: '请输入邮箱', trigger: 'blur'},],
                    status :[
                        {required: true, message: '请输入用户状态', trigger: 'blur'},],
                },
            }
        },
        methods:{
            stateFormat(row) {
                if (row.status === 1) {
                    return '删除'
                } else  {
                    return '使用'
                }
            },
            initForm() {//初始数据
                return {
                    id : "", // 用户id
                    name : "", // 姓名
                    username : "", // 用户名
                    password : "", // 密码
                    gender : "", // 性别
                    email : "", // 邮箱
                    status : "", // 用户状态
                }
            },
            queryDataTemp(){//查询数据列表
                return {
                    id : "", // 用户id
                    name : "", // 姓名
                    username : "", // 用户名
                    password : "", // 密码
                    gender : "", // 性别
                    email : "", // 邮箱
                    status : "", // 用户状态
                }
            },
            handleEdit(row) {
                console.log(row)
                this.form = row
                this.openDialog();
                this.title = "修改信息"
                this.type = "update"
            },
            handleDelete(row) {
                this.operatorDeleteUser(row)
            },
            handleSizeChange(val){
                this.pageSize=val
                this.toQueryData()
            },
            handleCurrentChange(val){
                this.page=val
                this.toQueryData()
            },
            clearQueryData(){
                this.queryData=this.queryDataTemp()
            },
            toQueryData(){
                let that=this
                that.dataTable=[]
                let loading=that.openLoading()
                $.ajax({
                    url:'<%=path%>/user/list?page='+that.page+"&size="+that.pageSize+that.ergodicJson(that.queryData),
                    type:"get",
                    success: function(res){
                        res=JSON.parse(res)
                        if (res.status=='200'){
                            that.dataTable=res.data.list;
                            that.total=res.data.total
                        }else{
                            that.MessageError(res.msg);
                        }
                    },
                    error:function(){
                        that.MessageError("获取数据失败！")
                    }
                });
                loading.close()
            },
            ergodicJson(obj) {
                var s = ""
                for (var itm in obj) {
                    itm=itm.replace(/(^\s*)|(\s*$)/g, "");
                    if (obj[itm] instanceof Array == true) {
                        if(obj[itm]!=""&&obj[itm]!=null&&obj[itm]!=undefined){
                            //是数组
                            s += "&" + itm + "_count=" + obj[itm].length
                            for (var i = 0; i < obj[itm].length; i++) {
                                if (obj[itm][i] instanceof Array == true) {
                                    s += ergodicJson2(obj[itm][i]);
                                } else if (obj[itm][i] instanceof Object == true) {
                                    s += ergodicJson2(obj[itm][i]);
                                } else {
                                    s += "&" + encodeURI(obj[itm][i]) + "=" + encodeURI(obj[itm][i]);
                                }
                            }
                        }
                    } else if (obj[itm] instanceof Object == true) {
                        if(obj[itm]!=""&&obj[itm]!=null&&obj[itm]!=undefined){
                            //是json对象。
                            s += ergodicJson2(obj[itm]);
                        }
                    }
                    else {
                        if(obj[itm]!=""&&obj[itm]!=null&&obj[itm]!=undefined){
                            //是简单数值
                            s += "&" + encodeURI(itm) + "=" + encodeURI(obj[itm]);
                        }

                    }
                }
                return s;
            },
            async operatorDeleteUser(row) {
                let that=this
                this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    let loading=that.openLoading()
                    $.ajax({
                        url:'<%=path%>/user/delete?id='+row.id,
                        type:"delete",
                        success: function(res){
                            res=JSON.parse(res)
                            if (res.status=='200'){
                                that.MessageSuccess(res.msg);
                                that.toQueryData()
                            }else{
                                that.MessageError(res.msg);
                            }
                        },
                        error:function(){
                            that.MessageError("删除数据失败！")
                        }
                    });
                    loading.close()
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
            handleInsert() {
                this.openDialog();
                this.title = "新增"
                this.type = "insert"
            },
            openDialog() {
                this.dialogFormVisible = true
            },
            closeDialog() {
                this.dialogFormVisible = false
                this.form = this.initForm();
                this.$refs.ruleUser.clearValidate();
                this.toQueryData()
                //查询数据
            },
            async submitUser() {
                this.$refs.ruleUser.validate((valid) => {
                    if (valid) {
                        this.operatorUser()
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            },
            async operatorUser() {
                let that=this
                let url=""
                if (this.type == "insert") {
                    url="<%=path%>/user/insert"
                } else if (this.type == "update") {
                    url="<%=path%>/user/update"
                }
                let loading=this.openLoading()
                console.log(that.form)
                $.ajax({
                    url : url,
                    type : 'post',
                    dataType : 'json',
                    contentType: 'application/x-www-form-urlencoded',
                    data :that.form,
                    success: function(res){
                        loading.close()
                        if (res.status=='200'){
                            that.MessageSuccess(res.msg)
                            that.closeDialog()
                        }else{
                            that.MessageError(res.msg);
                        }
                    },
                    error:function(){
                        loading.close()
                        that.MessageError("操作失败")
                    }
                });
                loading.close()
                this.toQueryData()
                //查询数据
            },
            openLoading() {
                let loadingInstance = this.$loading({
                    lock: true,
                    text: '正在加载...',
                    spinner: 'el-icon-loading',
                    background: 'rgba(0, 0, 0, 0.7)',
                });
                setTimeout(() => {
                    loadingInstance.close()
                }, 5000);
                return loadingInstance
            },
            MessageSuccess(msg){
                vue.$message({
                    showClose: true,
                    message: msg,
                    type: 'success',
                    center: true
                });
            },
            MessageError(msg){
                vue.$message({
                    showClose: true,
                    message: msg,
                    type: 'error',
                    center: true
                });
            },
        },
        created() {
            this.toQueryData()
        }
    })
</script>
</html>
